<script setup>
import { reactive, toRefs, ref, h, onMounted, onBeforeUnmount, markRaw } from 'vue';
import { ElTooltip } from 'element-plus';
import RulerIcon from '@/assets/images/base-map/ruler-icon.png';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useMapStore } from '@/stores/index.js';
import MapBaseLayerIndex from '../module-home/MapBaseLayer/MapBaseLayerIndex.vue';
import MapMeasureIndex from '../module-home/MapMeasure/MapMeasureIndex.vue';
import { CESIUM_MAP_INIT, DESTROY_CESIUM_VIEWER, FLY_TO_HOME, SET_VIEW_TYPE } from './map-cesium-js/common-cesium.js';

const props = defineProps({
  mapId: {
    type: String,
    default: '',
  },
  mapRoles: {
    type: Array,
    default: () => [],
  },
  toolbarPosition: {
    type: String,
    default: '0.9375rem',
  },
  toolbarRight: {
    type: String,
    default: '5.3125rem',
  },
  plugins: {
    type: Array,
    default: () => [],
  },
  mapLoadCallBack: {
    type: Function,
    default: () => {},
  }, // 地图初始化后加载回调函数 会传递map实例
  compareDataRequest: {
    type: Function,
    default: async () => [],
  }, // 用于获取数据对比数据
});
const { mapRoles, toolbarPosition, toolbarRight } = toRefs(props);
const emit = defineEmits(['mapPluginCheckChange']);

let map3D = null;

const mapStore = useMapStore();

const mapTools = ref([]);
// const mapToolsTop = ref([]);

const showObject = reactive({
  isMeasure: false, //当前是否开启测量
  showLayer: false, //当前是否显示图层
});

// 底图切换
const MapBaseLayerBtn = {
  render: () => {
    return h(
      'div',
      {
        class: 'tool-item layer-item',
        title: '图层',
        onClick: () => handleChangeIsBaseLayer(),
      },
      [
        h(SvgIconIndex, {
          iconClass: '底图切换',
          size: '20',
          class: 'cursor-pointer',
          title: '底图切换',
          color: '#c9e2fa',
        }),
      ],
    );
  },
};

// 二三维切换
const Map3DBtn = {
  render: () => {
    return h(
      'div',
      {
        class: 'tool-item layer-item',
        title: '二三维切换',
        onClick: () => handle3DMode(),
      },
      [
        h(SvgIconIndex, {
          iconClass: mapStore.mode == '3d' ? 'icon_2d' : 'icon_3d',
          size: '30',
          class: 'cursor-pointer',
          title: '二三维切换',
          color: '#c9e2fa',
        }),
      ],
    );
  },
};

// 初始化地图视角
const initMapView = {
  render: () => {
    return h(
      'div',
      {
        class: 'tool-item layer-item',
        title: '初始化视角',
        onClick: () => initializationPerspective(),
      },
      [
        h(SvgIconIndex, {
          iconClass: '地球',
          size: '20',
          class: 'cursor-pointer',
          title: '初始化视角',
          color: '#c9e2fa',
        }),
      ],
    );
  },
};

// 测量
const MapMeasureBtn = {
  render: () => {
    return h(
      'div',
      {
        class: 'tool-item',
        title: showObject.isMeasure ? '关闭测量' : '开启测量',
        onClick: () => handleChangeIsMeasure(),
      },
      [
        h('img', {
          src: RulerIcon,
          alt: '测量',
          style: {
            width: '3rem',
            height: '3rem',
          },
        }),
      ],
    );
  },
};

const getMapRoles = () => {
  mapTools.value = [
    {
      role: '底图切换',
      component: markRaw(MapBaseLayerBtn),
    },
    {
      role: '二三维切换',
      component: markRaw(Map3DBtn),
    },
    {
      role: '初始化视角',
      component: markRaw(initMapView),
    },
    {
      role: '测量',
      component: markRaw(MapMeasureBtn),
    },
  ];
};

onMounted(() => {
  setTimeout(() => {
    if (!map3D) {
      map3D = CESIUM_MAP_INIT('cesium-map');

      getMapRoles();
    }
  }, 10);
});

// 设置想要设置的状态
const changeShowUtil = (targetKey, boolean) => {
  emit('mapPluginCheckChange', targetKey, boolean);

  for (const key in showObject) {
    if (Object.hasOwnProperty.call(showObject, key)) {
      showObject[key] = boolean && key === targetKey;
    }
  }
};

// 底图
const handleChangeIsBaseLayer = () => {
  changeShowUtil('showLayer', !showObject.showLayer);
};

// 测量
const handleChangeIsMeasure = () => {
  showObject.isMeasure = !showObject.isMeasure;

  if (showObject.showLayer) {
    showObject.showLayer = false;
  }

  showObject.isCutting = false;
  showObject.isAttribute = false;
};

// 切换三维
const handle3DMode = () => {
  SET_VIEW_TYPE(mapStore.mode);
};

// 初始化视角
const initializationPerspective = () => {
  FLY_TO_HOME();
};

defineExpose({
  changeShowUtil,
});

onBeforeUnmount(() => {
  if (map3D) {
    map3D.destroy();
  }

  DESTROY_CESIUM_VIEWER();
  map3D = null;
});
</script>
<template>
  <div class="map-root relative h-full w-full overflow-hidden">
    <div :class="`map-tool-top`" :style="{ right: toolbarPosition }">
      <!-- 工具栏(权限)-->
      <div v-for="(tool, index) in mapTools" :key="index">
        <ElTooltip class="box-item" effect="customized" :content="tool.role" placement="left">
          <component :is="tool.component" v-if="mapRoles.includes(tool.role)" />
        </ElTooltip>
      </div>
      <div v-for="(tool, index) in props.plugins" :key="index">
        <ElTooltip class="box-item" effect="customized" :content="tool.role" placement="left">
          <component :is="tool.component" />
        </ElTooltip>
      </div>
    </div>
    <div id="cesium-map" class="home-container" />
  </div>

  <!-- 底图 -->
  <MapBaseLayerIndex
    v-if="showObject.showLayer"
    :toolbar-right="toolbarRight"
    @handle-change-is-base-layer="handleChangeIsBaseLayer"
  />

  <!-- 测量 -->
  <MapMeasureIndex
    v-show="showObject.isMeasure"
    :toolbar-right="toolbarRight"
    @handle-change-is-measure="handleChangeIsMeasure"
  />
</template>

<style scoped lang="scss">
.map-root {
  .map-tool-top {
    position: fixed;
    top: 111px;
    z-index: 9999;
    transition: 1s;
  }

  .map-tool-bottom {
    position: fixed;
    bottom: 50px;
    z-index: 20;
    transition: 1s;
  }
  .tool-item {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    cursor: pointer;

    i {
      width: 48px;
      height: 48px;
    }

    img {
      display: block;
      width: 48px;
      height: 48px;
    }
  }
  .layer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/base-map/layer-icon-bg.png') no-repeat center/100%;

    img {
      display: block;
      width: 18px;
      height: 18px;
    }
  }
}
</style>
